<template>
  <div style="max-width: 800px; margin: 10px auto">
    <!-- <a-card :bordered="false"> -->
    <div style="display: flex">
      <!-- 左侧输入区域 -->
      <div style="flex: 1; padding-right: 20px; padding-top: 10px">
        <a-form
          layout="horizontal"
          :form="form"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 16 }"
        >
          <a-form-item label="贷款金额">
            <a-input-number
              v-decorator="['loanAmount', { initialValue: 0 }]"
              :min="0"
              :max="10000000"
              :step="1"
              addon-after="元"
              style="width: 100%"
            />
          </a-form-item>

          <a-form-item label="贷款期限(月)">
            <a-input-number
              v-decorator="['loanTerm', { initialValue: 1 }]"
              :min="1"
              :max="60"
              addon-after="月"
              style="width: 100%"
            />
          </a-form-item>

          <a-form-item label="贷款利率">
            <a-input-number
              v-decorator="['interestRate', { initialValue: 1 }]"
              :min="1"
              :max="50"
              :step="0.1"
              addon-after="%"
              style="width: 100%"
            />
          </a-form-item>

          <a-form-item label="还款方式">
            <a-radio-group
              v-decorator="[
                'repaymentMethod',
                { initialValue: 'equalInstallment' },
              ]"
              button-style="solid"
            >
              <a-radio-button value="equalInstallment">等额本息</a-radio-button>
              <a-radio-button value="interestFirst">先息后本</a-radio-button>
              <a-radio-button value="equalPrincipalInterest"
                >等本等息</a-radio-button
              >
            </a-radio-group>
          </a-form-item>

          <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
            <a-button type="primary" @click="calculate">计算</a-button>
            <a-button style="margin-left: 10px" @click="reset">重置</a-button>
          </a-form-item>
        </a-form>
      </div>

      <!-- 右侧结果摘要 -->
      <div style="flex: 1" v-if="calculated">
        <a-descriptions bordered :column="1">
          <a-descriptions-item label="还款方式">{{
            repaymentMethodText
          }}</a-descriptions-item>
          <a-descriptions-item label="每月还款额"
            ><span style="font-weight: bold"
              >{{ monthlyPayment }} 元
            </span></a-descriptions-item
          >
          <a-descriptions-item label="总还款金额"
            >{{ totalPayment }} 元</a-descriptions-item
          >
          <a-descriptions-item label="总支付利息"
            >{{ totalInterest }} 元</a-descriptions-item
          >
        </a-descriptions>
      </div>
      <div
        v-else
        style="
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
        "
      >
        <div style="text-align: center">
          <a-icon type="calculator" style="font-size: 48px; color: #1890ff" />
          <p style="margin-top: 16px; font-size: 16px">
            请输入贷款参数并点击计算
          </p>
        </div>
      </div>
    </div>

    <!-- 还款计划表（底部） -->
    <div v-if="calculated" style="margin-top: 10px">
      <h3>还款计划表</h3>
      <a-table
        :columns="columns"
        :dataSource="paymentSchedule"
        :pagination="{ pageSize: 12 }"
        size="small"
        bordered
      />
    </div>
    <!-- </a-card> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: this.$form.createForm(this),
      calculated: false,
      monthlyPayment: 0,
      totalPayment: 0,
      totalInterest: 0,
      repaymentMethodText: "",
      paymentSchedule: [],
      columns: [
        {
          title: "期数",
          dataIndex: "period",
          key: "period",
          width: 80,
          align: "center",
        },
        {
          title: "月供金额",
          dataIndex: "payment",
          key: "payment",
          width: 120,
          align: "right",
        },
        {
          title: "本金",
          dataIndex: "principal",
          key: "principal",
          width: 120,
          align: "right",
        },
        {
          title: "利息",
          dataIndex: "interest",
          key: "interest",
          width: 120,
          align: "right",
        },
        {
          title: "剩余本金",
          dataIndex: "remaining",
          key: "remaining",
          width: 120,
          align: "right",
        },
      ],
    };
  },
  methods: {
    calculate() {
      this.form.validateFields((err, values) => {
        if (!err) {
          const P = values.loanAmount;
          const n = values.loanTerm;
          const r = values.interestRate / 100 / 12;
          const method = values.repaymentMethod;

          let monthlyPayment = 0;
          let totalPayment = 0;
          let totalInterest = 0;
          let repaymentSchedule = [];

          // 根据还款方式计算
          switch (method) {
            case "equalInstallment": {
              monthlyPayment =
                (P * r * Math.pow(1 + r, n)) / (Math.pow(1 + r, n) - 1);
              totalPayment = monthlyPayment * n;
              totalInterest = totalPayment - P;

              const paymentSchedule = [];
              let remaining = P;
              for (let i = 1; i <= n; i++) {
                const interest = remaining * r;
                const principal = monthlyPayment - interest;
                remaining -= principal;

                paymentSchedule.push({
                  key: i,
                  period: i,
                  payment: monthlyPayment.toFixed(2),
                  principal: principal.toFixed(2),
                  interest: interest.toFixed(2),
                  remaining: Math.max(0, remaining).toFixed(2),
                });
              }
              repaymentSchedule = paymentSchedule;
              this.repaymentMethodText = "等额本息";
              break;
            }

            case "interestFirst": {
              const monthlyInterest = P * r;
              monthlyPayment = monthlyInterest;
              totalInterest = monthlyInterest * n;
              totalPayment = P + totalInterest;

              const paymentSchedule = [];
              for (let i = 1; i <= n; i++) {
                const isLastPeriod = i === n;
                const payment = isLastPeriod
                  ? P + monthlyInterest
                  : monthlyInterest;
                const principal = isLastPeriod ? P : 0;
                const remaining = isLastPeriod ? 0 : P;

                paymentSchedule.push({
                  key: i,
                  period: i,
                  payment: payment.toFixed(2),
                  principal: principal.toFixed(2),
                  interest: monthlyInterest.toFixed(2),
                  remaining: remaining.toFixed(2),
                });
              }
              repaymentSchedule = paymentSchedule;
              this.repaymentMethodText = "先息后本";
              break;
            }

            case "equalPrincipalInterest": {
              const monthlyPrincipal = P / n;
              const fixedInterest = P * r;
              monthlyPayment = monthlyPrincipal + fixedInterest;
              totalInterest = fixedInterest * n;
              totalPayment = P + totalInterest;

              const paymentSchedule = [];
              let remaining = P;
              for (let i = 1; i <= n; i++) {
                remaining -= monthlyPrincipal;

                paymentSchedule.push({
                  key: i,
                  period: i,
                  payment: monthlyPayment.toFixed(2),
                  principal: monthlyPrincipal.toFixed(2),
                  interest: fixedInterest.toFixed(2),
                  remaining: Math.max(0, remaining).toFixed(2),
                });
              }
              repaymentSchedule = paymentSchedule;
              this.repaymentMethodText = "等本等息";
              break;
            }
          }

          this.monthlyPayment = monthlyPayment.toFixed(2);
          this.totalPayment = totalPayment.toFixed(2);
          this.totalInterest = totalInterest.toFixed(2);
          this.paymentSchedule = repaymentSchedule;
          this.calculated = true;
        }
      });
    },
    reset() {
      this.form.resetFields();
      this.calculated = false;
      this.monthlyPayment = 0;
      this.totalPayment = 0;
      this.totalInterest = 0;
      this.paymentSchedule = [];
    },
  },
};
</script>

<style scoped>
.ant-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
}
.ant-descriptions-item-content {
  font-weight: bold;
}
.ant-form-item {
  margin-bottom: 16px;
}
</style>
